<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/28
  Time: 9:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="roleData"
            border
            style="width: 100%">
        <el-table-column
                prop="roleid"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                prop="rolename"
                label="角色名"
        >
        </el-table-column>
        <el-table-column
                prop="remark"
                label="描述"
        >
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
                width="120">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='1'">启用</el-tag>
                <el-tag v-else type="info">禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                >
            <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
                <el-button type="primary" size="small" @click="fenQuan(scope.row.roleid)">修改权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--
       @size-change:每页显示的条数改变
       @current-change:当前显示的页码改变
       current-page: 当前页码
       page-size: 默认每页显示的条数
       layout:
       total: 总条数
   --%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--分配权限的对话框--%>
    <el-dialog
            title="分配权限"
            :visible.sync="dialogVisible"
            width="30%"
           >
        <%--
           data: 树形控件的数据
           node-key: 树形控件的id
           default-expanded-keys: 默认展开的id
           default-checked-keys: 默认选中的id
           props: 树形控件的属性
        --%>
        <el-tree
                :data="data"
                show-checkbox
                node-key="mid"
                ref="tree"
                :default-checked-keys="checkedIds"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirnFen()">确 定</el-button>
          </span>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            roleData:[],//角色数据
            currentPage:1,//当前页码
            pageSize:5,//每页显示的条数
            total:0,//总条数
            dialogVisible:false,//对话框是否可见
            data: [], //树形控件的数据
            checkedIds:[],//选中的id
            defaultProps: {
                children: 'children',
                label: 'mname'
            },
            roleId:0,//分配权限的角色id
        },
        created() {
            this.loadRole();//获取角色数据
        },
        methods: {
            // 确认分配权限
            confirnFen(){
                //1.被选中的菜单id 和对应的角色id.
                let checkedId=this.$refs.tree.getCheckedKeys(); //获取权限的菜单id
                let checkHalfId=this.$refs.tree.getHalfCheckedKeys();//获取半选中的菜单id
                //2.两个数组合并
                let cids=checkedId.concat(checkHalfId);
                axios.post("/menu/confirmFen?roleid="+this.roleId+"&cids="+cids).then(resp=>{
                     if(resp.data.code==200){
                         this.$message({
                             type: 'success',
                             message: resp.data.msg
                         });
                         this.dialogVisible=false;
                     }
                })
            },
            // 分配权限
            fenQuan(roleId){
                this.roleId=roleId;
                this.dialogVisible=true;
                //获取所有的菜单[menu]和该角色具有的菜单id [rolemenu]
                axios.get("/menu/listByRoleId?roleId="+roleId).then(resp=>{
                    this.data=resp.data.data.menus;
                    this.checkedIds=resp.data.data.menuIds;
                })
            },
            //获取角色数据
            loadRole(){
              axios.get("/role/listByPage?current="+this.currentPage+"&pageSize="+this.pageSize).then(res=>{
                    this.roleData=res.data.data.list;
                    this.total=res.data.data.total;
              })
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.loadRole();
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.loadRole();
            }
        }
    })
</script>
</html>
